<template>
  <!-- 订单卡片 -->
  <view class="page">
    <view class="casing bg-white">
      <view class="header flex justify-between align-center">
        <view class="leftPart flex align-end">
          <image
            src="https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/storelogo.png"
            class="logo"
            mode="scaleToFill"
          />
          <view class="tltle">{{ title }}</view></view
        >
        <view
          class="status fw-600"
          :class="status === 4 ? 'col-9a9' : 'col-f3a'"
          >{{ statusClerk }}</view
        >
      </view>
      <view
        class="cardFrame"
        v-for="(item, id) in items.cartInfoList"
        :class="items.cartInfoList ? (id === 0 ? 'border-none' : '') : ''"
        :key="id"
      >
        <uni-swipe-action>
          <uni-swipe-action-item
            :right-options="options"
            @change="
              (e) => {
                handleSwipeChange(e, item, id);
              }
            "
          >
            <template v-slot:right>
              <!-- 右侧滑动按钮 -->
              <view class="custom-delete-btn" @click="deleteCard(item)">
                <text>删除</text>
              </view>
            </template>
            <view class="content" :class="id === 0 ? 'pd20' : ''">
              <view class="card flex justify-between">
                <view class="startPart flex">
                  <image class="goodsImg" :src="item.image"></image>
                  <view
                    class="middlePart pd-12 flex flex-column justify-between"
                  >
                    <view class="tit fw-400 text-container">{{
                      item.proName
                    }}</view>
                    <view class="flex">
                      <view
                        class="assist fw-600 flex align-center justify-center"
                        >{{ "支持七天无理由退货" }}</view
                      ><view class="pointsPart flex align-center ml10">
                        <view class="tips fw-600">{{ "积分" }}</view>
                      </view></view
                    >
                  </view></view
                >

                <view
                  class="endPart pd-12 flex flex-column justify-between align-end"
                >
                  <view class="mark"
                    ><view class="price" v-if="item.price"
                      >¥{{ item.price }}</view
                    >
                    <view class="num fw-400" v-if="item.cartNum"
                      >共{{ item.cartNum }}件</view
                    ></view
                  >
                  <view class="amount" v-if="item.points"
                    >+{{ item.points }}</view
                  >
                </view>
              </view></view
            >
          </uni-swipe-action-item>
        </uni-swipe-action>
      </view>
      <view class="footer flex justify-end align-center">
        <button
          class="cancel fw-400 col-white"
          v-if="status === 1"
          @click="manage"
        >
          取消订单
        </button>
        <button
          class="payment fw-400 col-white"
          v-if="status === 1"
          @click="subOrder"
        >
          立即支付
        </button>
        <button class="cancel fw-400 col-white" v-if="status === 3">
          物流信息
        </button>
        <button
          class="cancel fw-400 col-white"
          v-if="status === 2 || status === 3"
        >
          申请售后
        </button>
        <button class="cancel fw-400 col-white" v-if="status === 3">
          确认收货
        </button>
        <button class="complete fw-400" v-if="status === 4">删除订单</button>
      </view>
    </view>
  </view>
</template>

<script>
import uniSwipeAction from "@dcloudio/uni-ui/lib/uni-swipe-action/uni-swipe-action.vue";
import uniSwipeActionItem from "@dcloudio/uni-ui/lib/uni-swipe-action-item/uni-swipe-action-item.vue";
import { Debounce } from "@/utils/validate.js";
export default {
  name: "orderCard",
  components: { uniSwipeAction, uniSwipeActionItem },
  props: {
    status: {
      type: Number,
      default: 1,
    },
    items: {
      type: Object,
      default: {},
    },
    title: {
      type: String,
      default: "",
    },
  },
  computed: {
    //布局样式
    statusClerk() {
      let navList = {
        1: "待付款",
        2: "待发货",
        3: "待收货",
        4: "已完成",
      };
      return this.status ? navList[this.status] : "";
    },
  },

  data() {
    return {
      options: [
        // {
        //   text: "删除",
        //   style: {
        //     backgroundColor: "#eb3f3a",
        //     color: "#ffffff",
        //     width: "200px",
        //   },
        // },
      ],
    };
  },
  created: function () {},
  mounted: function () {},
  methods: {
    // 滑动
    handleSwipeChange(e, data, idx) {
      // console.log("11111111111111111111", e, data, idx);
      if (e === "right") {
        console.log("删除按钮已滑出");
      } else {
        console.log("删除按钮已关闭");
      }
    },
    subOrder() {
      // 支付
      this.$emit("subOrder", this.items);
    },
    // 取消
    manage() {
      this.$emit("subDel", this.items.cartInfoList);
    },
    // 单个取消
    deleteCard: Debounce(function (e) {
      let arr = [];
      arr.push(e);
      this.$emit("subDel", arr);
      // uni.showModal({
      //   title: "提示",
      //   content: "确定要删除吗？删除后不可恢复！",
      //   confirmText: "确定删除", // 自定义按钮文字
      //   confirmColor: "#FF5A5F", // 确定按钮颜色（红色）
      //   cancelText: "再想想", // 取消按钮文字
      //   success: (res) => {
      //     if (res.confirm) {
      //       // 用户点击确定
      //       let arr = [];
      //       arr.push(e);
      //       this.$emit("subDel", arr);
      //     } else if (res.cancel) {
      //       console.log("用户取消了操作");
      //     }
      //   },
      // });
    }),
  },
};
</script>

<style scoped lang="scss">
.casing {
  margin: 0rpx 21rpx;
  border-radius: 19rpx;
  .header {
    height: 100rpx;
    margin: 16rpx 34rpx 0rpx 34rpx;
    border-bottom: 1rpx solid #f5f5f5;
    margin-bottom: 20rpx;
    .logo {
      height: 49rpx;
      width: 49rpx;
    }
    .tltle {
      font-size: 30rpx;
      color: #272727;
      font-weight: bold;
      margin-left: 19rpx;
    }
    .status {
      position: relative;
      top: 4rpx;
      font-size: 30rpx;
      color: #eb3f3a;
    }
  }
  .cardFrame {
    padding: 20rpx 19rpx 20rpx 33rpx;
    border-top: 1rpx solid #fbf7f7;
    .goodsImg {
      width: 164rpx;
      height: 164rpx;
      border-radius: 17rpx;
      border: 2rpx solid #eae4e4;
    }
    .middlePart {
      width: 310rpx;
      // #ifdef APP-PLUS
      width: 310rpx;
      // #endif
      margin-left: 40rpx;
      .tit {
        font-size: 26rpx;
        color: #272727;
      }
      .assist {
        width: fit-content;
        padding: 7rpx 14rpx;
        border-radius: 7rpx;
        border: 2rpx solid #eb3f3a;
        font-size: 18rpx;
        color: #eb3f3a;
      }
    }
    .endPart {
      .price {
        margin-top: 4rpx;
        font-size: 32rpx;
        color: #eb3f3a;
      }
      .num {
        font-size: 17rpx;
        color: #b2aeae;
        margin-top: 12rpx;
      }
      .mark {
        text-align: right;
      }
    }
  }
}
.pointsPart {
  // padding-bottom: 6rpx;
  .tips {
    padding: 7rpx 12rpx;
    border: 2rpx solid #11cc7b;
    font-size: 20rpx;
    border-radius: 10rpx;
    color: #11cc7b;
  }
}
.amount {
  font-size: 30rpx;
  color: #11cc7b;
}
.pd-12 {
  padding: 12rpx 0rpx;
}
.footer {
  height: 137rpx;
  border-top: 2rpx solid #f5f5f5;
  margin: 20rpx 19rpx 0rpx 33rpx;
  .cancel,
  .payment,
  .complete {
    height: fit-content;
    padding: 15rpx 31rpx;
    background: #eb3f3a;
    font-weight: 400;
    font-size: 28rpx;
    border-radius: 30rpx;
    margin-left: 14rpx;
  }
  .cancel {
    color: #272727;
    padding: 15rpx 30rpx;
    border: 2rpx solid #272727;
    background: transparent;
  }
  .complete {
    background: #afafaf;
    color: #ffffff;
  }
}
.col-f3a {
  color: #eb3f3a;
}
.col-9a9 {
  color: #9a9999;
}
.content {
  background-color: #fff;
}
.border-none {
  border: none !important;
}
.mt40 {
  margin-top: 40rpx !important;
}
.custom-delete-btn {
  margin-left: 20rpx;
  border-radius: 19rpx;
  width: 100px;
  height: 100%;
  background-color: #eb3f3a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
}
</style>
